<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="${ctx}/css/Tree.css"/>
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>
<!-- DATATABLES CSS END -->

<script>
    $(document).ready(function() {
        $('#simple-button').popover('#simple-popover', {});
        $('#top-button').popover('#top-popover', {preventLeft: true, preventRight: true, preventBottom:true});
    });
</script>

<h1 class="page-title">生成劳动合同向导</h1>

<div class="container_12 clearfix leading">
<div class="grid_12">
<!-- wizard -->
<form id="contract_form" method="post" class="wizard" novalidate>
<s:if test="#request.contractSign.id>0">
    <input type="hidden" name="contractSign.id" value="${contractSign.id}"/>
</s:if>
<input type="hidden" name="contractSign.employeeinfoBase.id" value="${baseinfo.id}">
<input type="hidden" name="reSignContractSignId" value="${reSignContractSignId}">
<nav>
    <ul class="clearfix">
        <li class="active"><strong>1.</strong> 合同封面</li>
        <li><strong>2.</strong> 工作地</li>
        <li><strong>3.</strong> 合同期限</li>
        <li><strong>4.</strong> 工时制度</li>
        <li><strong>5.</strong> 工资标准</li>
        <li><strong>6.</strong> 发薪日</li>
        <li><strong>7.</strong> 完成</li>
    </ul>
</nav>

<div class="items">

<!-- page1 -->
<section>
    <header>
        <h2>
            <strong>步骤 1: </strong> 输入合同封面信息
            <em>Enter the employees' basic information:</em>
        </h2>
    </header>

    <section>
        <ul class="clearfix">
            <!-- email -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 甲方：单位名称 <span>*</span><br/>
                    <input type="text" class="full" id="companyName" name="contractSign.companyName"
                           value="${contractSign.companyName}" required/>
                </label>
                <label>
                    <strong>1.</strong> 乙方：员工姓名 <span>*</span><br/>
                    <input type="text" class="full" id="e_name" name="contractSign.name" readonly="readonly"
                           value="${baseinfo.name}"
                           required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 单位性质 <span>*</span><br/>
                    <input type="text" class="full" id="compHabitude" name="contractSign.compHabitude"
                           value="${contractSign.compHabitude}" required/>
                </label>
                <label>
                    <strong>1.</strong> 户籍所在地地址 <span>*</span><br/>
                    <input type="text" class="full" id="census" name="contractSign.census"
                           value="${baseinfo.census}" required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 法定代表人或主要负责人 <span>*</span><br/>
                    <input type="text" class="full" id="principal" name="contractSign.principal"
                           value="${contractSign.principal}" required/>
                </label>
                <label>
                    <strong>1.</strong> 现居住地地址 <span>*</span><br/>
                    <input type="text" class="full" id="address" name="contractSign.address"
                           value="${baseinfo.address}" required/>
                </label>
            </li>

            <li class="required double">
                <label>
                    <strong>1.</strong> 单位住所 <span>*</span><br/>
                    <input type="text" class="full" id="comAddress" name="contractSign.comAddress"
                           value="${contractSign.comAddress}" required/>
                </label>
                <label>
                    <strong>1.</strong> 居民身份证号码 <span></span><br/>
                    <input type="text" class="full" id="idcard" name="contractSign.idcard"
                           value="${baseinfo.idcard}"/>
                </label>
            </li>

            <li class="required double">
                <label>
                </label>
                <label>
                    <strong>1.</strong> 其他有效身份证件号码 <span></span><br/>
                    <input type="text" class="full" id="idcardOther" name="contractSign.idcardOther"
                           value="${contractSign.idcardOther}"/>
                </label>
            </li>
            <!-- username --><!-- password -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>

<!-- page2 -->
<section>
    <header>
        <h2>
            <strong>步骤 2: </strong> 输入工作地点及岗位信息 <b></b>
            <em>Enter the staff for more information:</em>
        </h2>
    </header>
    <section>
        <ul class="clearfix">
            <!-- address -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 工作地点 <span>*</span><br/>
                    <input type="text" class="full" id="work_place" name="contractSign.work_place"
                           value="${contractSign.work_place}"/>
                </label>
                <label>
                    <strong>1.</strong> 职务(工种) <span>*</span><br/>
                    <input type="text" class="full" id="duty" readonly="readonly" value="${duty.dutyName}"/>
                    <input type="hidden" name="contractSign.duty.id" value="${duty.id}"/>
                </label>
            </li>
            <!-- zip / city -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev fl">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>
</section>


<!-- page3 -->
<section>
    <header>
        <h2>
            <strong>步骤 3: </strong> 输入本合同期限
            <em>合同期限</em>
        </h2>
    </header>

    <section>
        <div class="accordion" id="contract_type_div">
            <header class="current" id="contract_type_header_1">
                <h2><input type="radio" name="contractSign.contractType" value="1" checked="checked"  onclick="changeBeginDate(1)"
                           id="contract_type_radio_1"> 固定期限</h2>
            </header>
            <section class="clearfix" style="display: block;" id="contract_type_section_1">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 合同起始时间 <span>*</span><br/>
                        <input type="text" class="full" id="section1_beginDate" name="contractSign.beginDate"
                               onfocus="WdatePicker({maxDate:$('#section1_endDate').val()})"
                               value="${contractSign.beginDate}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 合同终止时间 <span>*</span><br/>
                        <input type="text" class="full" id="section1_endDate" name="contractSign.endDate"
                               onfocus="WdatePicker({minDate:$('#section1_beginDate').val()})"
                               value="${contractSign.endDate}"/>
                    </label>
                </li>

                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 试用期（不是必需条款） <span>*</span><br/>
                        <select id="probationership1" name="contractSign.probationership" class="full">
                            <option value="0">-- 请选择 --</option>
                            <option value="1">１个月</option>
                            <option value="2">２个月</option>
                            <option value="3">３个月</option>
                        </select>
                    </label>
                </li>
               <script type="text/javascript"> $("#probationership1").val(${contractSign.probationership})</script>  
            </section>
            <header id="contract_type_header_2">
                <h2><input type="radio" name="contractSign.contractType" value="2" onclick="changeBeginDate(2)" id="contract_type_radio_2"> 无固定期限</h2>
            </header>
            <section class="clearfix" id="contract_type_section_2">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 合同起始时间 <span>*</span><br/>
                        <input type="text" class="full" id="section2_beginDate" name="" value="${contractSign.beginDate}" onfocus="WdatePicker()"/>
                    </label>
                    <label>
                        <strong>1.</strong> 试用期（不是必需条款） <span>*</span><br/>
                        <select id="probationership2" name="" class="full">
                            <option value="0">-- 请选择 --</option>
                            <option value="1">１个月</option>
                            <option value="2">２个月</option>
                            <option value="3">３个月</option>
                        </select>
                    </label>

                   <script type="text/javascript"> $("#probationership2").val(${contractSign.probationership})</script>  
                </li>
            </section>
            <header id="contract_type_header_3">
                <h2><input type="radio" name="contractSign.contractType" value="3" id="contract_type_radio_3"> 项目完成制
                </h2>
            </header>
            <section class="clearfix" id="contract_type_section_3">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 完成（生产工作） <span>*</span><br/>
                        <input type="text" class="full" id="itemContent" name="contractSign.itemContent"
                               value="${contractSign.itemContent}"/>
                    </label>
                </li>
            </section>
        </div>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>
</section>

<!-- page4 -->
<section>

    <header>
        <h2>
            <strong>步骤 4: </strong> 输入工时制度
            <em>工时制度</em>
        </h2>
    </header>

    <section>
        <ul class="clearfix">
            <!-- address -->
            <li class="required double">
                <label>
                    <strong>1.</strong> 工时制度 <span>*</span><br/>
                    <select id="manHaur" name="contractSign.manHaur" class="full">
                        <option value="0">-- 请选择 --</option>
                        <option value="1">1、标准工时工作制度</option>
                        <option value="2">2、综合计算工时工作制度</option>
                        <option value="3">3、不定时工作制度</option>
                    </select>
                </label>
                <script>$("#manHaur").val(${contractSign.manHaur})</script>
            </li>
            <!-- zip / city -->
        </ul>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>


<!-- page5 -->
<section>

    <header>
        <h2>
            <strong>步骤 5: </strong> 输入工资标准
            <em>工资标准</em>
        </h2>
    </header>

    <section>
        <div class="accordion" id="pay_type_div">
            <header class="current" id="pay_type_header_1">
                <h2><input type="radio" name="contractSign.payType" value="1" id="pay_type_radio_1" checked="checked"> 实行计工时工资制</h2>
            </header>
            <section class="clearfix" style="display: block;" id="pay_type_section_1">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 试用期月工资 <span>*</span><br/>
                        <input type="text" class="full" id="probationerShippay" name="contractSign.probationerShippay"
                               value="${contractSign.probationerShippay}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 试用期满后的月工资 <span>*</span><br/>
                        <input type="text" class="full" id="formalPay" name="contractSign.formalPay"
                               value="${contractSign.formalPay}"/>
                    </label>
                </li>
            </section>
            <header id="pay_type_header_2">
                <h2><input type="radio" name="contractSign.payType" value="2" id="pay_type_radio_2"> 实行计件工资制</h2>
            </header>
            <section class="clearfix" id="pay_type_section_2">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 计件定额 <span>*</span><br/>
                        <input type="text" class="full" id="pieceRate" name="contractSign.pieceRate"
                               value="${contractSign.pieceRate}"/>
                    </label>
                    <label>
                        <strong>1.</strong> 计件单价 <span>*</span><br/>
                        <input type="text" class="full" id="pieceRatePay" name="contractSign.pieceRatePay"
                               value="${contractSign.pieceRatePay}"/>
                    </label>
                </li>
            </section>
            <header id="pay_type_header_3">
                <h2><input type="radio" name="contractSign.payType" value="3" id="pay_type_radio_3"> 双方另行约定工资按以下形式支付
                </h2>
            </header>
            <section class="clearfix" id="pay_type_section_3">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 支付形式 <span>*</span><br/>
                        <input type="text" class="full" id="paying" name="contractSign.paying"
                               value="${contractSign.paying}"/>
                    </label>
                </li>
            </section>

            <header id="pay_type_header_4">
                <h2><input type="radio" name="contractSign.payType" value="4" id="pay_type_radio_4"> 加班加点工资的计算基数</h2>
            </header>
            <section class="clearfix" id="pay_type_section_4">
                <li class="required double" style=" list-style-type:none">
                    <label>
                        <strong>1.</strong> 计算基数 <span>*</span><br/>
                        <input type="text" class="full" id="overtimeBase" name="contractSign.overtimeBase"
                               value="${contractSign.overtimeBase}"/>
                    </label>
                </li>
            </section>
        </div>

    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr">下一步 &raquo;</button>
    </footer>

</section>


<!-- page6 -->
<section>
    <header>
        <h2>
            <strong>步骤 6: </strong> 输入发薪日
            <em>发薪日</em>
        </h2>
    </header>

    <section>
        <li class="required double" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 发薪日 <span>*</span><br/>
                <input type="text" class="full" id="payDate" name="contractSign.payDate" value="${contractSign.payDate}"
                       onblur="checkForInt(this, '请正确填写发薪日期', 5)"/>
            </label>
        </li>
        <li class="required double" style=" list-style-type:none">
            <label>
                <strong>1.</strong> 上个月/当月 <span>*</span><br/>
                <input type="text" class="full" id="paydateBegin" name="contractSign.paydateBegin"
                       value="${contractSign.paydateBegin}" onblur="checkForInt(this, '请正确填写发薪起始日期', 1)"/>日
            </label>
            <label>
                <strong>1.</strong> 上个月/当月 <span>*</span><br/>
                <input type="text" class="full" id="paydateEnd" name="contractSign.paydateEnd"
                       value="${contractSign.paydateEnd}" onblur="checkForInt(this, '请正确填写发薪结束日期', 30)"/>日
            </label>
        </li>
    </section>

    <footer class="clearfix">
        <button type="button" class="prev">&laquo; 上一步</button>
        <button type="button" class="next fr" onclick="submitForm()">下一步 &raquo;</button>
    </footer>
</section>


<!-- page7 -->
<section>

    <header>
        <h2>
            <strong>步骤 7: </strong> 完成!
            <em>员工：<span id="contract_UserName">${baseinfo.name}</span>的合同已在系统中生成成功.</em>
        </h2>
    </header>

    <section>
        <h3>本次录入用时<span id="contract_totalTime"></span>!</h3>
    </section>

    <footer class="clearfix">
        <!--<button type="button" class="prev">&laquo; 上一步</button>-->
        <a href="#contract/conAudit.xhtml" class="button"><span class="icon"
                                                                style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>返回</a>
    </footer>

</section>
</div>
<!--items-->
</form>
<!--wizard-->
</div>
</div>

<!-- WIZARD SETUP -->
<script type="text/javascript" src="js/jquery.wizard.js"></script>
<script type="text/javascript" src="${ctx}/js/global_util.js"/>
<script>
    $(function() {
        $('.wizard').wizard();
        setTimeout("initStep3()", 1000);
        setTimeout("initStep5()", 1500);
    });

    //init contract type
    function initStep3() {
        var contractType = "${contractSign.contractType}";
        if (contractType > 0) {
            $("#contract_type_div header").removeClass("current");
            $("#contract_type_div section").hide();
            $("#contract_type_radio_" + contractType).attr("checked", true);
            $("#uniform-contract_type_radio_1 span:first").removeClass("checked");
            $("#uniform-contract_type_radio_${contractSign.contractType} span:first").addClass("checked");
            $("#contract_type_header_" + contractType).addClass("current");
            $("#contract_type_section_" + contractType).show();
            if(contractType==2){
               // $("#section2_beginDate").val(${contractSign.beginDateStr});
                //alert(${contractSign.probationership});
               // $("#probationership2").val(${contractSign.probationership});

            }
        }

    }
    //init pay type
    function initStep5() {
        var payType = "${contractSign.payType}";
        if (payType > 0) {
            $("#pay_type_div header").removeClass("current");
            $("#pay_type_div section").hide();
            $("#pay_type_radio_" + payType).attr("checked", true);
            $("#uniform-pay_type_radio_1 span:first").removeClass("checked");
            $("#uniform-pay_type_radio_${contractSign.payType} span:first").addClass("checked");
            $("#pay_type_header_" + payType).addClass("current");
            $("#pay_type_section_" + payType).show();
        }

    }

    function checkForInt(obj, msg, defaultValue) {
        if (!checkInt($(obj).val())) {
            $(obj).val(defaultValue);
            return false;
        }
    }
    function submitForm() {
        $("input[type='radio'][name='contractSign.contractType']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                return false; //退出each(相当于break, return true相当于continue)
            }
        });
        $("input[type='radio'][name='contractSign.payType']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                return false; //退出each(相当于break, return true相当于continue)
            }
        });
        var url = "${ctx}/ajax/contract_sign_add.xhtml?version.id=${version.id}";
        $.ajax(url, {
            type:"POST",
            data:$("#contract_form").serialize(),
            dataType:"json",
            cache:false,
            success:function(totalTime) {
                $("#contract_totalTime").html(totalTime);
            },
            complete:function(b) {
            }
        });
    }

    function  changeBeginDate(obj){
        if(obj==1){
            $("#section1_beginDate").attr("name","contractSign.beginDate");
            $("#section2_beginDate").attr("name","");
            $("#probationership1").attr("name","contractSign.probationership");
            $("#probationership2").attr("name","");
        }else{
            $("#section2_beginDate").attr("name","contractSign.beginDate");
            $("#section1_beginDate").attr("name","");
            $("#probationership2").attr("name","contractSign.probationership");
            $("#probationership1").attr("name","");
        }
    }
    function noSolidTime() {
        var sHtml = "";
        sHtml += "<li class=\"required double\" style=\" list-style-type:none\">";
        sHtml += "<label>";
        sHtml += "<strong>1.</strong> 合同起始时间 <span>*</span><br/>";
        sHtml += "<input type=\"text\" class=\"full\" id=\"beginDate2\" name=\"contractSign.beginDate\" onfocus=\"WdatePicker()\" value=\"${contractSign.beginDate}\"/>";
        sHtml += "</label>";
        sHtml += "<label>";
        sHtml += "<strong>1.</strong> 试用期（不是必需条款） <span>*</span><br/>";
        sHtml += "<select id=\"probationership_id\" name=\"contractSign.probationership\" class=\"full\">";
        sHtml += "<option value=\"0\">-- 请选择 --</option>";
        sHtml += "<option value=\"1\">１个月</option>";
        sHtml += "<option value=\"2\">２个月</option>";
        sHtml += "<option value=\"3\">３个月</option>";
        sHtml += "</select>";
        sHtml += "</label>";
        sHtml += "</li>";
        $("#contract_type_section_2").html("").html(sHtml);
        $("#contract_type_section_1").html("");
    }
</script>
<!-- WIZARD SETUP END -->